import Doc from '~/components/layout/docs'
import Card from '~/components/card'
import { Image } from '~/components/media'
import Caption from '~/components/text/caption'
import Note from '~/components/text/note'
import Collapse, { CollapseGroup } from '~/components/collapse'
import { IconCard } from '~/components/card'
import { List } from '~/components/list'
import BitbucketIcon from '~/components/icons/bitbucket'
import GitLabIcon from '~/components/icons/gitlab'
import GitHubIcon from '~/components/icons/github'

export const meta = {
  title: 'Git Integrations',
  description:
    "How to use the ZEIT Now Git Integrations for GitHub, GitLab, or Bitbucket to automatic deploy from your project's repository for each push and ship to production on merge to the main branch.",
  image: `${process.env.ASSETS}/docs/git-integrations/git-push.png`,
  editUrl: 'pages/docs/v2/git-integrations/index.mdx',
  lastEdited: '2020-02-04T13:49:03.000Z'
}

ZEIT Now provides integrations for your [GitHub](/docs/v2/git-integrations/zeit-now-for-github), [GitLab](/docs/v2/git-integrations/zeit-now-for-gitlab), and [Bitbucket](/docs/v2/git-integrations/zeit-now-for-bitbucket) projects, allowing for **automatic deployments on every branch push** and merge to the default branch.

<Image
  src={`${process.env.ASSETS}/docs/git-integrations/git-push.png`}
  width={2080 / 3}
  height={1440 / 3}
/>

The ZEIT Now Git integrations provide the following benefits:

- [Preview Deployments](/docs/v2/platform/deployments#preview) for every push.
- [Production Deployments](/docs/v2/platform/deployments#production) for the most recent changes from the default branch.
- Instant rollbacks when reverting changes assigned to a custom domain.

The easiest way to use a Git integration is to think of your **default branch as production**. Every time a pull/merge request is made to the default branch, ZEIT Now will **create a unique deployment**, allowing you to **view the changes in a preview environment before merging**.

When merging to the default branch, a **Production Deployment** is made, making the latest changes available to assigned custom domains automatically.

## Available Integrations

Click any Git integration from the list below to skip to its section:

<List columnsDesktop={3} columnsTablet={3} columnsMobile={1}>
  <IconCard
    label="GitHub"
    icon={<GitHubIcon />}
    href="/docs/v2/git-integrations/zeit-now-for-github"
    arrowed
  />
  <IconCard
    label="GitLab"
    icon={<GitLabIcon />}
    href="/docs/v2/git-integrations/zeit-now-for-gitlab"
    arrowed
  />
  <IconCard
    label="Bitbucket"
    icon={<BitbucketIcon />}
    href="/docs/v2/git-integrations/zeit-now-for-bitbucket"
    arrowed
  />
</List>

## Quick Installation

You can install any Git integration directly from your dashboard by clicking ["New Project"](/new), then from the GitHub, GitLab, or Bitbucket tabs in the "From your existing code" section, clicking the "connect" or "install" button.

<Image
  src={`${process.env.ASSETS}/docs/git-integrations/install-github.png`}
  width={1184/2}
  height={622/2}
  shadow
  borderRadius
/>
<Caption>The "From your existing code" section with a prompt to install ZEIT Now for GitHub.</Caption>

export default ({ children }) => <Doc meta={meta}>{children}</Doc>

export const config = {
  amp: 'hybrid'
}
